<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入jQuery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    /*
      区别一：
      前提：图片或资源是网络数据获取 (因为我们在做项目的时候，大部分的图片资源都是通过网络数据获取的)
      区别1.原生JS和jQuery入口函数的加载模式不同
      原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
      jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
        后面我们会讲到怎么使用jQuery处理这种情况，这里先做了解
    */
    // 1.通过原生的JS入口函数可以拿到DOM元素
    // window.onload = function () {
    //   var img = document.getElementsByTagName('img')[0]
    //   console.log(img);
    //   // 通过原生的JS入口函数可以拿到DOM元素的宽高（前提是图片或资源是通过网络数据获取的）
    //   var width = window.getComputedStyle(img).width
    //   console.log('onload', width);
    // }
    
    // 2.通过jQuery入口函数可以拿到DOM元素
    // $(document).ready(function() {
    //   var $img = $('img')
    //   console.log($img);
    //   // 通过jQuery入口函数不可以拿到DOM元素的宽高
    //   var $width = $img.width();
    //   console.log('ready', $width);
    // })

    /*
      区别2
      原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的
      jQuery中编写多个入口函数，后面的不会覆盖前面的
    */ 
    // window.onload = function () {
    //   alert('hello js1')
    // }
    // window.onload = function () {
    //   alert('hello js2')
    // }
    
    $(document).ready(function () {
      alert('hello jquery1')
    })
    $(document).ready(function () {
      alert('hello jquery2')
    })
  </script>
</head>
<body>
  <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2512877968,1366423448&fm=26&gp=0.jpg" alt="">
</body>
</html>